/*


Key CSS style sheet 

*/



<style>

  
/*********************************************
    
Key CSS for Overall Styling Properties    
    
**********************************************/
   
*{
  box-sizing: border-box;   /**this makes padding etc operate inside the div across all browsers;*/
  margin: 0;
  padding: 0;
}



.textblock, .keepfooterlow, .appinfodiv {
max-width: 1200px;
margin: auto;
 }



 h1, h2, h3, h4, h5, li, ul, li, a, p, .footercolumn, .footererror, .faq_accordion, #faq_ada_table, .optionsflexboxitem, .select-items, .poslabelsize , #posgraphtitle , .scalesflexboxitem     {
     
       /*font-family: 'Roboto',sans-serif;*/
     
       font-family: 'Source Sans Pro',sans-serif;   
     font-style: normal;
      /*font-weight: 400;*/
      font-weight: 300;
    
     font-size: 18px;
      /*color: #555555;*/
      color:#404040;
     line-height: 1.5em; 
     text-rendering: optimizeLegibility;
      word-wrap: break-word;
     }     

h1  {    padding: 16px 0px;        }

h2  {    padding: 5px 0px;       }        
    
h3, h4, .readmore, #backtotopid, .readmoreaddtext, #faq_ada_table    {
    font-size: 14px;
    margin: 0px 0px 0px 0px;
    -webkit-margin:0px 0px 0px 0px;
    text-align:left;
    font-style: normal;
    color:#555555;
    padding:0px 0px 0px 0px;
    }  
  
h4 {   padding: 0px 0px 0px 0px;   }  
 
.appLegendItem_Text h4 {   padding: 0px 0px 20px 0px;   }  
.BulletItem_Text h4    {   padding: 0px 0px 20px 0px;   }  

 
/* this puts a div around each page, and ensures the footer says at the bottom of the page */  
.keepfooterlow {
    min-height:1150px;
      }  


a.linktootherpage {font-size: 14px;
    color:#1E90FF;
    font-weight:500;  
    text-decoration: none;
}

a.linktootherpage:hover  
   { text-decoration: underline;}

  /* color the email link */
     
     h1 a {color:#1E90FF;;
           }

.largefont {
    font-size:28px;
    
}

/*********************************************
    
Key CSS for Logo and Nav Bar    
    
**********************************************/



body{
    margin: 0;
}

#banner {
 background:#fafafa;
 border-bottom:1px solid #e5e5e5;/*#F5F5F5;*/
  height: 45px;  margin:0 0;padding: 0px 0px 0px 0px;
}

#logoleft   {  float: left;  }

#ghostright {  float: right; }

#comparetext h1 {    
    line-height:1em;
    display:inline-block;
    font-family: 'Roboto',sans-serif;
    font-weight:300;
    margin:0 0;padding: 14px 0px 0px 10px;
     }

#comparetext a { text-decoration: none !important;} 

.stylediabetes   {
    color:#1E90FF;
    font-weight:500;
    text-decoration: none;}

    
 
.navbar {
    display:flex;
    border:1px solid white;
    }   

 .navbar ul { 
     margin: 10px 0px 0px 0px; 
     padding: 0px 0px 0px 0px; 
     display:flex;
     flex:auto;
     flex-direction: row ;
     flex-wrap:wrap ;
     text-align: center;
     justify-content:center;
     }

.navbar  li { 
    display: flex; 
    margin: 0px 0px 0px 0px; 
    padding: 5px 35px 12px 35px; 
    border:1px solid white;
      }

 .navbar li a {
    color: #1E90FF;
  text-decoration: none;
  transition: background  2.5s, color 2s; 
  transition: color 2.5s, background  2.5s, color 1s; 
  position: relative;  
  display:table;

}

.navbar li a:hover  {
    color: black;
   }


.myindexpage    .navbar a#navopt1.navoption, 
.myservicespage .navbar a#navopt2.navoption, 
.myfaqpage      .navbar a#navopt3.navoption, 
.myaboutpage    .navbar a#navopt4.navoption, 
.mycontactpage  .navbar a#navopt5.navoption  { 
    color: black;  }


  #iconlinkedin, #iconfacebook {
            color:black; 
        }
        #iconlinkedin:hover {color:#0077B5;}
        #iconfacebook:hover {color:#3b5998;}
        


/* note: ADDITIONAL NAV BAR on HOVER in MEDIA QUERY, as need to only do this when 
   not on tablet or phone (where we can hover)*/


/*********************************************
    
Key CSS for Home Page    
    
**********************************************/
    


 
  /* this styles the first page of the website and some useful spacer divs elements*/


 #splashscreencontainer {
  width: auto;
    position: relative;
     margin:auto;
 }

.spacer25 {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;     
    height: 25px;  
    border: 1px solid white;
    clear:both;
      }
      
.spacer50 {
       margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;     
    height: 50px;  
    border: 1px solid white;
     clear:both;
    }
    
.spacer100 {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;     
    height: 100px;  
    border: 1px solid white;
    clear:both;
      }
    



  /* this animation controls the fade away on the welcome text */ 
  @-webkit-keyframes fadeawaywelcome {
     from {opacity: 1;}
     to {opacity: 0;}
     }
   
  /* this animation controls the fade away on the welcome text */ 
  @keyframes fadeawaywelcome {
     from {opacity: 1;}
     to {opacity: 0;}
     } 
    
#introwelcome {
  width: auto;
  height: 130px;
  position: relative;
  padding: 0px 0px 0px 100px;
  margin: 0px 0px 0px 0px;
  background:white;
  z-index: 1;
  opacity:1;
  
}
 /*           animation: fadeawaywelcome forwards ; 
    -webkit-animation: fadeawaywelcome forwards;
        -ms-animation: fadeawaywelcome forwards;   
       -moz-animation: fadeawaywelcome forwards  ;    
         -o-animation: fadeawaywelcome forwards;   
 
 
  animation-delay: 6s;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: linear;  
  */
    

    /* this animates the text in the spacer div, by changing the width from zero upwards */
    @keyframes anim_changewidth {
    from {width: 10px;}
    to {width: 100%;}
}

    @-webkit-keyframes anim_changewidth {
    from {width: 10px;}
    to {width: 100%;}
}

 

/* this is the code to make the intro welcome text to look like typing, by growing the width attribute in the animation; */

 #introwelcome h1 {
   
       animation: anim_changewidth forwards ; 
    -webkit-animation: anim_changewidth forwards;
        -ms-animation: anim_changewidth forwards;   
       -moz-animation: anim_changewidth forwards  ;    
         -o-animation: anim_changewidth forwards;   
      
         
         
     width:0;
     -webkit-transform: translateX(0px);  /* this propoerty is not being used here, but can be used to 'hide' things left of screen*/
     /* this is increased when the animation delay below is over, and the runs;*/
     animation-delay: 0.5s;
     animation-duration: 2s;
    /*  animation-delay: 0s;      remove this line if want to go slow;*/
    /*  animation-duration: 0s;   remove this line if want to go slow;*/
     
     animation-iteration-count: 1;
     animation-timing-function: linear;
        overflow: hidden;    /* this stops the text outside of the box to show*/
     white-space: nowrap; /* this stops the text from wrapping to a new line*/
/*     border-right: .15em solid orange;*/
     margin: 0 0;
    }     
 
 
   


/* this code should be identical to above, but with a animation-delay longer to allow the first text to run */    
 #introwelcome h2{
    
       animation: anim_changewidth forwards ; 
    -webkit-animation: anim_changewidth forwards;
        -ms-animation: anim_changewidth forwards;   
       -moz-animation: anim_changewidth forwards  ;    
         -o-animation: anim_changewidth forwards;   
      
        
    
         
     width:0;
     -webkit-transform: translateX(0px);  /* this propoerty is not being used here, but can be used to 'hide' things left of screen*/
     /* this is increased when the animation delay below is over, and the runs;*/
     animation-delay: 3s;
     animation-duration: 2s;
    
     
     animation-iteration-count: 1;
     animation-timing-function: linear;
        overflow: hidden;    /* this stops the text outside of the box to show*/
     white-space:nowrap; /* this stops the text from wrapping to a new line*/
   /*  border: .15em solid orange;*/
     margin: 0 0;
     height:60px;
    }       
    
  

/* this is the main animation for drug illustration */


   @keyframes showdrug {
         from {opacity: 0;}
         to   {opacity: 1;}
      }
      @-webkit-keyframes showdrug {
         from {opacity: 0;}
         to   {opacity: 1;}
      }
      
#drugillustration {
      border: 1px solid white;   
      opacity: 0;
     
     animation: showdrug forwards ; 
    -webkit-animation: showdrug forwards;
        -ms-animation: showdrug forwards;   
       -moz-animation: showdrug forwards  ;    
         -o-animation: showdrug forwards;   
       
      animation-delay: 1s; 
      animation-duration: 4s;
      animation-iteration-count: 1;
      animation-timing-function:linear;   
      }       
 
 





    
    
/* this is the main container for the text sections , that are split into bullet points using the classes below */




 .textblock {  
     display:block;
      height: 100%;
      position: relative;
      top: 0;
      left: 0;
      padding: 0px 50px 0px 50px;
      margin: auto;
      border: 1px solid white;
      max-width:1200px;
      justify-content:center;
     align-content:center;
     opacity:0;
    }
    
    /* new code to show whats new section ;*/

#textblockJan19 {opacity:1;}


/*by setting opacity to 0, we can change to 1 when in viewport using keyframe rule below;*/
 
#textblock1, #textblock2, #buttonsandbarchart, #titleandparallelchart{
   opacity:0;  
}
 

@keyframes slideintextblock {
    from {opacity: 0; 
         transform: translateX(-800px);
    transition-timing-function:ease-in-out;
    }
    to {opacity: 1;
        transform: translateX(0px);
        transition-timing-function:ease-in-out;
    }
}

@-webkit-keyframes slideintextblock {
    from {opacity: 0; 
    -webkit-transform: translateX(-800px);
     transition-timing-function:ease-in-out;
    }
    to {opacity: 1;
       -webkit-transform: translateX(0px);
       transition-timing-function:ease-in-out;
    }
}

.hidescrollbar {
     height: 100%;
    overflow:hidden;
}



.textblockaddanimation {
   
     animation: slideintextblock  ; 
    -webkit-animation: slideintextblock ;
        -ms-animation: slideintextblock ;   
       -moz-animation: slideintextblock   ;    
         -o-animation: slideintextblock ;  
     
    animation-duration: 1s; 
    animation-fill-mode:forwards;
    animation-delay: 0s;
    }

.BulletItem {
     margin: 0px 0px 0px 0px;
     padding:0px 0px 0px 0px;
     background: white;
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: stretch;
     border:1px solid white;
     }

.BulletItem_Ico {
     padding: 0px 0px 0px 0px;
     margin:0px 0px 0px 0px;
     width: 80px;
     min-height:60px;
     display: flex;
     justify-content: center; /* centers the icon horizontally*/
     align-items:top;         /* puts icon at top */
     background: white;
     vertical-align:baseline;
     color:#1E90FF;
     border:1px solid white;
     }

.BulletItem_Text {
     padding: 0px 0px 0px 0px;
     margin:0px 0px 0px 0px;
     flex: 1;
     text-align:left;
     align-self: top; /* this keeps the top of the text aligned with top of icon*/
     align-items:top;
     justify-content: center;
     background: white;
     vertical-align:top;
     border:1px solid white;
     }



  /* this styles the back to top button*/
    
 #backtotopbutton {
      display: none;
      position: fixed;
      bottom: 12px;
      right: 20px;
      z-index: 99;
      border: 1px solid white;
      outline: none;
     
      background-color: #1E90FF;
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 10px;
      }

#backtotopbutton:hover {
      background-color: #006600;
      }     




  /* this styles the readmore sections*/
    
.readmore, #backtotopid {
     display:inline-block;
     float:none;
     color: #1E90FF;
     font-weight:500;  
     }
    
.readmore:hover  
   { text-decoration: underline}


.readmoreaddtext {
    display:none;;
    float:none;
     margin:0px 0px 0px 0px;
        }


  
   
#barbuttonarea1, #barbuttonarea2 {
    padding: 10px 10px 0px 10px;
    background:white;
      margin: 0px 0px;/* sets the left and right margin of the background;*/
    display: flex;
    flex-direction: row ;   /* this tells the items to be across (row) or down (column)*/
    flex-wrap:wrap ;      /* this allows the items to wrap if the window is small*/
    justify-content:center; /* this puts the menu items in the middle of the page*/
                    /*flex-start; center  ;  flex-end ;space-between;space-around;*/
    align-items: center;  /* this aligns the items if the text is over 1 line  .e.g. make the HOME text longer;*/
         /*flex-start; center  ;  center ;space-between;space-around;*/
    list-style: none;
    font-weight: 200;
    }  
     

/* this styles the two sets of buttons */

.barbutton1, .barbutton2 {
    background-color: white;
    border: 1px solid lightgray; 
    color: black;
    padding: 8px 10px 8px 10px;
    min-width: 80px;
    margin: 10px 0px 0px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    border-radius: 25px;
    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    outline:none;   
    }


.barbutton1:hover {
    background-color: #1E90FF!important;     /*the use of important overrides the basic styling*/
    color:white!important;
     /*  border: 1px solid white!important;    */
    }   

 /* this styles the colour of the border for each drug class button */
    
.barbutton_dpp4   {   border: 1px solid #2ca02c;          }    
.barbutton_glp1  {   border: 1px solid #1f77b4;          }    
.barbutton_sglt2 {   border: 1px solid #ff7f0e;          }   
.barbutton_tzd   {   border: 1px solid red;              }      
.barbutton_su    {   border: 1px solid #9467bd;          }  

.barbutton_all:hover  {  color:white!important; background-color: #1E90FF!important; }

.barbutton_dpp4:hover  {  color:white!important; background-color: #2ca02c!important; }
.barbutton_glp1:hover  {  color:white!important; background-color: #1f77b4!important; }
.barbutton_sglt2:hover {  color:white!important; background-color: #ff7f0e!important; }
.barbutton_tzd:hover   {  color:white!important; background-color: red!important; }
.barbutton_su:hover    {  color:white!important; background-color: #9467bd!important; }


/* this styles the titles of the barchart (the selected buttons like "hba1c and dpp4" and the title for the parallel coords plot)*/    
#barmysel, #paralleltitle {
      font-size: 18px;
      font-weight: 400;
      padding: 20px 10px 10px 10px;
      text-align: center;
      }  


/*********************************************
    
Key CSS for Applications Page    
    
**********************************************/
    
    
.appflextitle {
    display: flex;
    margin: 10px 0px;  
    padding:5px 0px;
    justify-content: space-between;
    width:100%;
    align-content: center;    
    justify-content: center; 
    text-align: center;  
    vertical-align: middle;
    /*line-height: 90px;*/
    height:auto;    
    border: 1px solid white;   
    }
    
.appflexcharacters {
	display:flex;
	flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto;
    padding:5px 0px;
    max-width:800px;
    min-width:100px;
    height:auto;
    border: 1px solid white;
    }
    

 .appflexcharacters h1 {   
     padding: 0px 0px; 
     margin:15px 0px;
     font-weight:500;
     font-size:16px;
    color:black;
     }   

    
.appflexitem {
   background: white;
   font-weight:500;
    
  padding: 0px;
  height: auto;
  margin: 0px 15px 15px 15px;
  color: white;
  text-align: center;
  /* border-bottom:  5px solid gray ;*/
  display: flex; 
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width:200px;
  max-width:100%;
  filter: grayscale(100%);
   -webkit-filter: grayscale(100%); 
  border: 2px solid white; 
  }
    
    
 .appflexface {
     width:180px;   
     justify-content: top; 
     height:180px; 
     border: 2px solid white;
     margin:0px 0px 10px 0px;
     }
    
 .appfaceselected {
    background:white;
     animation: apppulse 1s forwards;
    -webkit-animation: apppulse 1s forwards;
        -ms-animation: apppulse 1s forwards;   
       -moz-animation: apppulse 1s forwards;    
         -o-animation: apppulse 1s forwards;   
     
    }   
       
 /* this controls IE11 - need to remove filter, not supported*/
      @keyframes apppulse {
    from {   border: 2px solid white; -webkit-filter: grayscale(100%); }
    to   {   border: 2px solid #1E90FF;-webkit-filter: grayscale(0%); }
    }    
  @-webkit-keyframes apppulse {
    from { opacity: 1;  filter: grayscale(100%); -webkit-filter: grayscale(100%);
           border: 2px solid white; }
    to   { opacity: 1; filter: grayscale(0%); -webkit-filter: grayscale(0%);
           border: 2px solid #1E90FF;}
    }   

  @-moz-keyframes apppulse {
    from { opacity: 1;  filter: grayscale(100%);
           border: 2px solid white; }
    to   { opacity: 1; filter: grayscale(0%);
           border: 2px solid #1E90FF;}
    }    
  @-o-keyframes apppulse {
    from { opacity: 1;  filter: grayscale(100%);
           border: 2px solid white; }
    to   { opacity: 1; filter: grayscale(0%);
           border: 2px solid #1E90FF;}
    }    
    
 .appflexitem:hover  {
       animation: apppulse 1s forwards;
    -webkit-animation: apppulse 1s forwards;
        -ms-animation: apppulse 1s forwards;   
       -moz-animation: apppulse 1s forwards;    
         -o-animation: apppulse 1s forwards;   
     
    }   
     
    
    
  
/* main class for all info boxes */ 
    
 .appinfodiv {
     display:block;
    justify-content: space-between;
      margin: 0px 0px 0px 0px; 
      padding:0px 0px 0px 0px;
    
     /*      max-width:1200px;*/
     border: 1px solid white; 
      }
 
    
/* main class for each info box */ 
    
    
.appinfodivlist {
    width:auto;
    padding: 0px 10px;
    margin:0px 0px 0px 0px;
    background: white;
    opacity: 0.5;  /* this hides the text at the start;*/
    display:none;
    }
  
    
/* class added to divs to show details/information based on click on user face*/ 
/* class added to divs to show details/information based on click on user face*/ 

  @keyframes appshowinfo {
    from { opacity: 0.5;   }
    to   { opacity: 1;  }
    }
  @-webkit-keyframes appshowinfo {
    from { opacity: 0.5;   }
    to   { opacity: 1;  }
    }
  
    @-moz-keyframes appshowinfo {
    from { opacity: 0.5;   }
    to   { opacity: 1;  }
    }
  

  @-o-keyframes appshowinfo {
    from { opacity: 0.5;   }
    to   { opacity: 1;  }
    }
    
.appshowinfotext {
    display:block;
     animation: appshowinfo 2s forwards;
    -webkit-animation:appshowinfo 2s forwards;
        -ms-animation: appshowinfo 2s forwards; 
       -moz-animation: appshowinfo 2s forwards;
         -o-animation: appshowinfo 2s forwards;
       }  

  
.appLegendItem {
      margin: 0px 0px;
       display: flex;
      flex-flow: row nowrap;
      border:1px solid white;
      }

.appLegendItem_Ico {
      width: 80px;
    /*  min-height:60px;*/
      display: flex;
      justify-content: center;
      background: white;
      color:#1E90FF;
      border:1px solid white;
      align-items:top;         /* puts icon at top */
     background: white;
     vertical-align:baseline;
    
     }
    
    
     
    
.appLegendItem_Text {
      padding: 0px 0px;
      margin:0px 0px;
        flex: 1;
     align-self: top; /* this keeps the top of the text aligned with top of icon*/
     background: white;
     vertical-align:top;
     border:1px solid white;
     }






  
/*********************************************
    
Key CSS for FAQ Page    
    
**********************************************/
   
/* color the FAQ button */

.faq_accordion {
    background-color:white;/*E8E8E8;*/
    color:#666666;
    cursor: pointer;
    width: 100%;
    border-color:red;
    border:none;
    border-bottom: 1px solid #E8E8E8;
    border-top: 1px solid #E8E8E8;; 
    text-align: left;
    transition: 0.75s;
    padding: 15px 15px 15px 15px;
    margin: 0px 0px 0px 0px;
}
 
.faq_accordion.active, .faq_accordion:hover {
    background-color:  #1E90FF; 
    color: white;
    border-bottom: 1px solid #E8E8E8;;
     border-top: 1px solid #E8E8E8;; 
     
 }


.faq_accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.faq_accordion.active:after {
    content: "\2212";
}

.faq_answer {
    padding: 0px 0px;
    display: none;
    background-color: white;
}

.faq_answer.show {
    display:block;
}   
     
.faq_answer h2  {
     padding: 0px 15px 0px 35px;
     font-size:14px;
     }     
.faq_answer li { font-size:14px;}
   
.faq_ada {
    display: block;
    width:95%;
    padding:0px 0px 0px 0px;
    margin:0px auto;
       min-width:150px;
     height:auto;
    border: 1px solid white;  
    position:relative;
      }
    

    
#faq_ada_table, th, td {
         text-align: center;
    height:70px;
    font-size: 18px;
    font-weight:400 ;
    }
        
td {
    font-size: 16px;
      border-bottom:1px solid #434343;  
          border-right:1px solid #434343; }
  
        
#faq_ada_table tr:nth-child(even) {
     background-color: #fff;
}
#faq_ada_table tr:nth-child(odd) {

      background-color: #eee;
}
        
        
        
.faq_table_column1
    {  background-color: #C10019; 
        color:white; 
        
       }

     
     /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
 .tooltiptext {
    visibility: hidden;
    background-color: #5f5f5f;
    color: #fff;
     font-size:12px;
     width:100%;
     min-width:160px;
    text-align: left;
    padding: 0px 0px 0px 0px;
     margin:0px 0px 0px 0px;
     line-height: 14px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
     top:105%;
     left:-10px;
        margin: 0px 0px 0px 0px;
     padding:10px 10px 10px 10px ;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
     bottom: 100%;
     right: 50%;
    border: solid transparent;
     content: "";  
     height:0;
     width: 0;
     position: absolute;
     border-bottom-color: #5f5f5f;
     margin-left: 10px;
    border-width: 10px;
 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;}



/*********************************************
    
Key CSS for About Page    
    
**********************************************/
  

.abouttitle {
    display: flex;
    margin: 10px 0px;  
    padding:5px 0px;
    justify-content: space-between;
    width:100%;
    align-content: center;    
    justify-content: center; 
    text-align: center;  
    vertical-align: middle;
    /*line-height: 90px;*/
    height:auto;    
    border: 1px solid white;   
    }




.aboutcontainer {
   display:inline;
    width:100%;
   padding:0px 0px 0px 0px;
   margin:0px 0px 0px 0px;
   box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.3);
   border-top: 1px solid rgba(0, 0, 0, 0.1); ;
   float:left;
}

.aboutphoto {
    padding:20px 20px 20px 20px;
    margin:0px 0px 0px 0px;
      width:30%;
    min-width:150px;
      height:auto;
    border: 1px solid white;
     border-radius:50%;  
    float:right;
      }

.abouttextlist {
  
    border: 1px solid white;
    padding:0px 20px 0px 40px;
    margin:0px 0px 30px 0px;
    list-style-type:square;
    list-style:square;
    list-style-position:inside;
  }

.abouttextlist li {
    font-size: 14px;
  padding: 5px 0px 10px 0px;
     list-style-position:outside;
  }


#readmorenewparadigmadd, #readmorebackgroundadd, #readmoremodelusesadd, 
#readmorenewreimbursementadd, #readmorebetterdesignadd 
 { padding: 20px 0px 10px 0px; }


a.linktopaper {font-size: 14px;
    color:#1E90FF;
    font-weight:500;  
    text-decoration: none;
}

a.linktopaper:hover  
   { text-decoration: underline;}



/*
.abouttextlist li p {
    font-size: 14px;
    padding: 5px 0px 0px 0px;
     list-style-position:outside;
  }
*/


/*

Plan to remove these once decided new version is best


.aboutcontainerxx {
    display:flex;
    padding:0px 0px 0px 0px ;
    margin:0px 5px ;
    flex-flow: row nowrap;
     justify-content: center;
    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.1); ;
}

.abouttextxx {
	width:70%;
    border: 1px solid white;
    padding:0px 0px 0px 40px;
    margin:0px 0px 0px 0px;
  }

#abouttextlistxx {
    border: 1px solid white;
    padding:0px 0px 0px 0px;
    margin:0px 0px;
    list-style-type:square;
    list-style:square;
    list-style-position:inside;
}

#abouttextlistxx li {
    font-size: 14px;
    padding: 5px 0px 0px 0px;
     list-style-position:outside;
  }

.aboutphotoxx {
   padding:20px 20px 20px 20px;
   width:30%;
   height:auto;
    border: 1px solid white;
      }

.aboutphotoimagexx {
   margin:0px 0px 0px 0px;
  width:100%;
  height:auto;
  justify-content: top; 
  border: 1px solid white;
  border-radius:50%;  
}
*/



/*********************************************
    
Key CSS for Contact Page
    
**********************************************/


    /*
 
    width:100%;
   padding:0px 0px 0px 0px;
   margin:0px 0px 0px 0px;
     float:left;
*/

.contactcontainer {
   display:block;   position: relative;   justify-content:center;
     align-content:center;
      width:100%;
    padding: 0px 0px;
  margin: auto;
    background: white ;
    opacity:1;
    max-width:1200px;
  /*   border: 1px solid black;*/
    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.1); ;
        opacity:1;
        }

 



.contactbanner {
    display: block;
    width:90%;
    padding:0px 0px 0px 0px;
    margin:0px auto;
       min-width:150px;
     height:auto;
    border: 1px solid white;  
    position:relative;
      }
    

   
.contactLegendItem {
      margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
       display: flex;
    flex:1;
     
       width:95%;
    height:80px;
      border:1px solid white;
        }

.contactLegendItem_Ico {
      flex: 0.2;
      margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
  
    /*  min-height:60px;*/
      display: flex;
      justify-content: center; /* aligns horizontally */
      background: white;
      color:#1E90FF;
      border:1px solid white;
      align-items:center;       /* aligns vertically */
     background: white;
 
   }
    
   
    
.contactLegendItem_Text {
     flex:0.8;
     padding: 0px 0px 0px 0px;
     margin:  0px 0px 0px 0px;
     background: white;
     border:1px solid white;
      align-self:center;
     }
 
/*
.contactLegendItem_Text h1  {
     padding: 0px 0px 0px 0px;
     margin:  0px 0px 0px 0px;
       text-align: left;
          }*/


/*********************************************
    
Key CSS for Footer    
    
**********************************************/

  
  .footercontainer {
      clear:both;
       
    }  
    
 .signupboxtitle, .signupsubmitbutton{
     font-size: 20px;
     background:#1E90FF;   
     display: flex;
     display: -ms-flexbox;
	 display: -webkit-flex;
      color: white;
     padding: 0px 20px;
     margin: 0px 0px;
     border: 1px solid white;
     font-weight:400;
     width: 100%;
     max-width:800px;
     justify-content:center;
     flex-flow:column;
     flex-direction: column;
     text-align: center;
     align-items: center;
     vertical-align:middle;
     height:50px;  
     line-height:normal;
  

     }  

input.signupsubmitbutton {background: #1E90FF;
      
    height: 50px; line-height: 50px;
    
}


 /* this is to hide the company field from the input (used as sp*m fi**er !)  */
   #signupcompany {
       display:none;
          font-size: 3rem;
          background:green;    
          border: 1px solid orange;
    }
    
/*    style the signup box confirmation box to white, which will change to blue when email info successfully passes through php*/
    
  #signupconfirm {
          background:white;    
    }
  
            
    
.signupbox  {
    padding: 0px 0px 0px 0px;
    background:white;
    opacity: 1;
    margin: 0px auto;;   
    display: flex;
    flex-direction: row ;   /* this tells the items to be across (row) or down (column)*/
    flex-wrap:wrap ;        /* this allows the items to wrap if the window is small*/
    flex-basis:100%;
    justify-content:center; /* this puts the menu items in the middle of the page*/
                            /*flex-start; center  ;  flex-end ;space-between;space-around;*/
    align-items: center;    /* this aligns the items if the text is over 1 line  .e.g. make the HOME text longer;*/
                            /*flex-start; center  ;  center ;space-between;space-around;*/
    list-style: none;
    max-width:800px;
    border: 1px solid white;
   
    }
    .signupbox h2 {
        padding:0px 10px 0px 10px;
    }
        
 .signuparea  {
    background:white;
    opacity: 1;
    margin: 0 auto;
    display: flex;
         display: -ms-flexbox;
	display: -webkit-flex;
    flex-flow: row wrap;
      flex-basis:100%;
    width: 100%;
      max-width:800px;
    border: 1px solid white;
    }


    
    
 .footertextarea {
       outline: none;
       border: 1px solid lightgray;;
       overflow: auto;
       background-color: white;
       width: 50%;
       max-width:400px;
       box-sizing: border-box;  
       margin: 0px 0% 0px 0px;
       padding:0px 0px 0px 10px;
       text-align: left;
       color:#1E90FF;    
    }    

    
      
    

.footerform, .footercolumn, .footerleft, .footerright, .footermiddle, input, textarea    { 
    box-sizing: border-box;  
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing:border-box; 
    -o-box-sizing:border-box;  
    margin: 0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
 }

 .footerform  {
  width: 100%;
   max-width:800px;
   min-width:300px;
    border: 1px solid white;
   }

.footercolumn {
    float: left;
    padding: 10px;
    background:white;
    box-sizing: border-box; 
    border: 1px solid white;
  }
/*
.footerleft, .footerright, .footermiddle, input, textarea {
     line-height: 30px; 
}
.footerleft  { width: 35%;  }

.footerright { width: 25%;  
               font-size: 14px;}

.footermiddle {
  width: 40%;  box-sizing: border-box;  
     border: 1px solid gray;
}

.footerform:after, .footercolumn:after {
    content: "";
    display: table;
    clear: both;
}
*/



.footercentre {
  width: 100%; 
   max-width:400px;
    margin: auto;
    justify-content: center;
    box-sizing: border-box;  
  
 
}

.footerspacer {height:10px;}



input, textarea[type=text] { 
     width:100%; 
     border:1px solid lightgray;
    }


 input, textarea   {
     text-align: left;
     font-family: 'Roboto',sans-serif;
     font-style: normal;
     font-weight: 400;
     color:black;
     font-size: 18px;
     color: #555555;
     text-rendering: optimizeLegibility;
      word-wrap: break-word;
     margin: 0px 0px 0px 0px;
     padding:0px 0px 0px 10px;
    }   


input {height: 2em; }
textarea {   line-height: 1.3em;}


 input[type=text]:focus, textarea[type=text]:focus  {
    background-color: #f5f5f5;
   }



input[type="submit"] {
   -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    box-sizing: border-box;   
  margin: 0;
  padding: 0;  
}


input[type="text"], textarea[type=text] {

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
   
}


 .footererror {
  font-weight: 400;
  color:red;
    padding:0px 0px 0px 10px;
  }
     

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #1E90FF;
opacity:1;    
}
::-moz-placeholder { /* Firefox 19+ */
  color: #1E90FF;
    opacity:1;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #1E90FF;
    opacity:1;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #1E90FF;
    opacity:1;
}

:-moz-placeholder { /* Firefox 18- */
  color: #1E90FF;
    opacity:1;
}
    





  
/*********************************************
    
Key CSS for Graphs    
    
**********************************************/

     

#drugillustration, #barchart, #parallel, #networkdiagram {
      display:block;   
      margin: auto;
       max-width:1400px;
      border: 1px solid white;
      justify-content:center;
      align-content:center;
    cursor: pointer;
/*    cursor: crosshair;*/
 }

 #networkdiagram { max-width:800px;}


.drugnamestext {
    font-size:14px;
    text-anchor: middle;
    }


#barchartxlabel {
       font-size: 16px;
             font-weight: 200;
           font-family: 'Roboto',sans-serif;
color:black;
    border:1px solid white;
    margin:0px 20%;
    padding: 0px 0px 0px 50px;
    line-height:1;
    width: 65%;
   text-align: center;
}
      svg {
              font-size: 12px;
             font-weight: 100;
           font-family: 'Roboto',sans-serif;
          
            }

            .background path {
              fill: none;
              stroke: none;
              stroke-width: 20px;
              pointer-events: stroke;
            }

            .foreground path {
              fill: none;
              stroke: steelblue;
              stroke-width: 1.5px;
            }

            .axis .title {
              font-size: 16px;
              font-weight: 400;
           
            }

            .axis line,
            .axis path {
              fill: none;
              stroke: gray;
              shape-rendering: crispEdges;
            }

            .label {
              -webkit-transition: fill 125ms linear;
            }

            .active .label:not(.inactive) {
              font-weight: 700;   /* this makes the parallel coords plot labels bold when mouseover */
            }

            .label.inactive {
              fill: #ccc;    /*this makes all the parallel coords labels gray if they are not the mouseover one;*/
            }

            .foreground path.inactive {
              stroke: #ccc;
              stroke-opacity: .1;
              stroke-width: 1px;
            }
    

    
    
 /* styles for the barcharts  */
    
    
    /* this controls the bar opacity when you mouse over the bars */
.bar {
  fill: rgb(255,255,255);
    opacity: 0.7;
    }
   
    /* this controls the bar opacity when you mouse over the bars */
 .bar2x {
  fill: purple;
 opacity: 0.1;
 color: aqua;     
  }
   
    /* not sure what this is doing 
    
 .mytext {
  font: 48px sans-serif;
  text-align: center;
  color:red;
  fill:blue; */
    /* this is the text colour for the label, not the above one;     */

/*
.axis .approved text {
  font: 16px sans-serif;
   fill: purple;  
}

.axis .notapproved text {
  font: 16px sans-serif;
   fill: red;  
}*/

/* currently not using this class for drug labels, but estimate values is working - would like to use with drug labels when I can actually select the ticks based on my "myapproval" input dataset variable*/

.approved {
text-decoration:normal;
font-weight:500;
font-style: normal;
 font-size: 1em;   
     fill: red;  
}
.notapproved {
 text-decoration: none;
font-weight:normal;
font-style: italic;
         fill: RED;  
    
}
/* this sets the color on mouseover for the barvalue AND the TEXT lABEL in the middle of the bar - note the order is important here...if we put this before the others, the ones above change it*/
/* perhaps should improve CSS to have above working without */
    
    
.barvaluex {
  fill: black;
   font-weight:500; 
  opacity:1;
  }  

/* this works...see test7.js code */


.showhighlighton {
     opacity: 0.2;
}

.showhighlightoff {
   fill: red; 
}


/* these control the tickmark color and the axis line for each of the yaxis and xaxis classes assigned in the JS code*/
.myxaxis path,
.myxaxis line,
.myyaxis path,
.myyaxis line
{
  fill: none;
  stroke: black; /* you can hide this using white*/
  shape-rendering: crispEdges;
}

.x.axis path {
  display: show;
  }  
 
.title {
    font-weight:500;
}

/*

 #introwelcome, .textblock,  .spacer50, .spacer100 {    border: 1px solid red; } 
 #drugillustration, #barchart, #parallel {  border: 5px solid blue;    }
*/





  
/*********************************************
    
Key CSS for Media Queries    
    
**********************************************/



/*  tablet media query  */
    @media screen and (max-width: 1024px) {
 
    /* this makes the nav bar jump down when screen window small;*/
        /* .main-nav ul {
          padding: 50px}*/
   
     #introwelcome {
       padding: 0px 0px 0px 50px;
       }
    .largefont {
       font-size:24px;
       }
        #textblockJan19 {opacity:1;max-width:800px;padding: 0px 30px 0px 30px;}

        
      
    }

/* this maes hover only work when hover is enabled (ie. with mouse, not tablets/phones */
  @media (hover: hover) { 
      
 .navbar li a:before {    
  background: none repeat scroll 0 0 transparent;
  bottom: -6px;
  content: "   ";
   height: 2px;
  left: 50%;
  position: absolute;
  background: black; 
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0px;
   z-index: -1;
}
 .navbar li a:hover:before { 
  width: 100%; 
 left:0%;
    }}



/*  smartphone media query  */

    @media screen and (max-width: 480px), 
     @media all and (max-width: 480px) {
       
       .largefont {
           font-size:12px;
                  }
   
       .textblock {  
           padding: 0px 10px 0px 10px;
           }
   
        /* reduce the main spacer sizes */
        .spacer100 {     height: 30px;  
                   }
         .spacer50 {     height: 15px;  
                   }       
   
       /* these makes the face icons smaller on the services page */

       .appflexitem h1 {font-size:12px;padding:0px 0px;margin:0px 0px;}    
       .appflexitem {  width:100px;   }
       
        .appflexface {
            width:65px;   
            height:65px; 
        }
       
   h1, h2, h3, h4, h5, li, ul, li, a, p, .footercolumn,  .footererror, input, textarea, .faq_accordion, .readmore, #backtotopid, .readmoreaddtext   {
      font-size: 12px;
        }
        .footerinputadvice { color: white;} /* this hide optional text when very small screen*/
        /* made drug names on illustration smaller*/
        
    .drugnamestext, .abouttextlist li, .readmoreaddtextsmall, a.linktopaper  {
        font-size:10px;}
     
     /* this narrows the gap on small screens with the bullets*/
.appLegendItem_Ico, .BulletItem_Ico  {
    width: 40px;}
    
        /* make the titles for the barchart and parallel coords plot smaller*/
        #barmysel, #paralleltitle {
      font-size: 12px;
      font-weight: 400;
      padding: 20px 10px 10px 10px;
      
      }  
        
        
      /* made text on barchart smaller*/
        svg {
              font-size: 8px;
           }
        
        /* this puts a div around each page, and ensures the footer says at the bottom of the page */  
.keepfooterlow {
    min-height:700px;
      }  
        
        
 /*    .signupbox         {  background:white;      }
       .footerinputadvice {  width:30%;             }   */    
    }


</style>